<template>
  <div>
    <Header />
    <el-main>
      <div class="con">
        <el-card style="width: 1000px" class="card">
          <i class="el-icon-s-promotion"></i>&nbsp;
          <span class="classify">房产经纪</span>
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 400px"
          >
            <!-- 表格 -->
            <el-table
              :data="agentsList"
              border
              :show-header="false"
              class="table"
              @row-click="propertyFn"
            >
              <el-table-column prop="title" width="150">
                <template #default="{ row }">
                  <img :src="row.image" alt="" class="pic" />
                </template>
              </el-table-column>
              <el-table-column prop="dest">
                <template #default="{ row }">
                  <div class="right">
                    <div class="title">
                      {{ row.title }}
                    </div>
                    <div class="dest">
                      {{ row.desc }}
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </div>

      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :page-size="page._limit"
          :current-page="new_page"
          :total="count"
          @current-change="changePage"
        /> </el-row
    ></el-main>
    <Footer />
  </div>
</template>

<script>
import { getAgentsList, getAgentsCount } from "@/api/agents.js";

export default {
  data() {
    const _limit = 2;
    const _start = 0;
    return {
      agentsList: [],
      new_page: 0,
      page: {
        _limit,
        _start,
      },
      count: 0, //总数据
    };
  },
  created() {
    getAgentsList(this.page).then((res) => {
      // console.log(res);
      this.agentsList = res.data;
    });
    getAgentsCount().then((res) => {
      // console.log(res);
      this.count = res.data;
    });
  },

  methods: {
    propertyFn(item) {
      // console.log(item);
      this.$router.push(`/property/?agent=${item.id}`);
    },
    changePage(newPage) {
      console.log(newPage);
      this.new_page = newPage;
      this.page._start = (newPage - 1) * this.page._limit;

      getAgentsList(this.page).then((res) => {
        // console.log(res);
        this.agentsList = res.data;
      });
    },
  },
};
</script>



<style lang="less" scoped>
.classify {
  font-size: 20px;
  color: coral;
}
.container {
  .top {
    color: #e8ad3f;

    margin-bottom: 10px;
    .icon {
      margin-right: 10px;
      font-size: 20px;
    }
    span {
      font-size: 18px;
    }
  }
  .content {
    .box-card {
      span {
        font-size: 18px;
        font-weight: 700;
      }
    }
  }
}
.el-icon-s-promotion {
  font-size: 30px;
  color: coral;
}
body {
  height: 500px;
  padding-bottom: 200px;
  margin-bottom: 200px;
}
.card {
  
  margin: 0 auto;
}
.table {
  text-align: center;
}
.title {
  font-size: 20px;
  font-weight: 700;
}
.right {
  text-align: center;
}
.cell {
  line-height: 180px;
}
.pic {
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.con{
  margin-top: 70px;
  margin-bottom: 70px;
}
</style>
